<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>
<script src="js/jquery-1.8.2.js"></script>
</head>
<body>
	<a class="layui-btn" id="tianjia">添加</a>
	<div></div>

	<table id="demo" lay-filter="test"></table>
	<script>
		layui.use('table', function() {
			var table = layui.table;

			//第一个实例
			table.render({
				elem : '#demo',
				height : 550,
				url : 'Chaxunxinwenxinxi' //数据接口
				,
				page : true //开启分页
				,
				cols : [ [ //表头
				{
					field : 'id',
					title : '序号',
					width : 80,
					sort : true,
					fixed : 'left'
				}, {
				
					field : 'fenlei',
					title : '类别',
					width : 80,
					sort : true,
					fixed : 'left'
				}, {
					field : 'tupian',
					title : '图片',
					templet : '#img',
					width : 180,
					sort : true,
					fixed : 'left'
				}, {
					field : 'xinxi',
					title : '信息',
					width : 380,
					sort : true,
					fixed : 'left'
				}, {

					field : 'zhonglei',
					title : '分类',
					width : 100,
					sort : true,
					fixed : 'left'
				}, {

					field : 'fabushijian',
					title : '发布时间',
					width : 100,
					sort : true,
					fixed : 'left'
				}, {

					field : 'jieshushijian',
					title : '结束时间',
					width : 100,
					sort : true,
					fixed : 'left'
				}, {
					fixed : 'right',
					width : 150,
					align : 'center',
					toolbar : '#barDemo'
				} //这里的toolbar值是模板元素的选择器
				] ]
			});
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						$.ajax({
							url : "Shanchuxinwenxinxi",
							type : "get",
							data : {
								"id" : data.id
							},
							success : function(res) {
								if (res == 1) {
									layer.confirm('删除成功!');
									obj.del(); //删除对应行（tr）的DOM结构，并更新缓存

								} else {
									layer.confirm('删除失败!');
								}
							}
						});

						layer.close(index);

						//向服务端发送删除指令
					});
				} else if (layEvent === 'edit') { //编辑
					//do something
					layer.open({
						type : 1, //Page层类型
						area : [ '500px', '500px' ],
						shadeClose : true,
						shade : 0, //遮罩透明度
						maxmin : true, //允许全屏最小化
						content : $("#updateForm"), //弹窗路径
						success : function(layero, index) {
							$('#id').val(data.id);
							$('#xx').val(data.xinxi);
							$('#test1').val(data.fabushijian);
							$('#test2').val(data.jieshushijian);
						},

					});

					layui.use('upload', function() {
						var upload = layui.upload;

						//执行实例
						var uploadInst = upload.render({
							elem : '#img2' //绑定元素
							,
							url : 'upload' //上传接口
							,
							done : function(res) {
								//上传完毕回调
								$("#imgUrl").attr("src", res.data).css("width",
										"200px");
							},
							error : function() {
								//请求异常回调
								//alert("上传失败");
							}
						});
					});
					
					
					layui.use('laydate', function(){
						  var laydate = layui.laydate;
						  
						  //执行一个laydate实例
						  laydate.render({
						    elem: '#test2' //指定元素
						  });
						});
					layui.use('laydate', function(){
						  var laydate = layui.laydate;
						  
						  //执行一个laydate实例
						  laydate.render({
						    elem: '#test1' //指定元素
						  });
						});
					
					
					

					layui.use([ 'laydate', 'form' ], function() {
						var laydate = layui.laydate;
						var form = layui.form;
						//执行一个laydate实例
						laydate.render({
							elem : '#createdate' //指定元素
						});

						form.on('submit(tijiao)', function(data) {
							console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
							console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
							console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

							data.field.tupian = $("#imgUrl").attr("src");

							//写对应ajax
							$.ajax({
								url : "Xiugaixinwenxinxi",//地址
								type : "get",//请求方式
								data : data.field,
								success : function(res) {//成功以后的回调函数
									if (res == 1) {
										layer.confirm('修改成功！');
										window.location.reload();
									} else {
										layer.confirm('修改失败！');
									}
								}
							});

							return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
						});

					});
				}

			});
		});

		$("#tianjia").click(function() {

			layui.use('layer', function() {
				var layer = layui.layer

				layer.open({
					type : 2,
					area : [ "500px", "500px" ],
					content : 'Tianjiaxinwenxinxi.html' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
				});
			});
		});
	</script>

	<script type="text/html" id="img">
  		<img src="{{d.tupian}}" />
	</script>


	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
</script>


	<!-- 编辑表单 -->
	<div id="updateForm" style="display: none">
		<form class="layui-form" id="updateForm">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">序号</label>
				<div class="layui-input-block">
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input" id="id" disabled="disabled">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">分类</label>
				<div class="layui-input-block">
					<select name="fenlei" lay-filter="aihao">
						<option value="1">媒体新闻</option>
						<option value="2">宇通新闻</option>
						<option value="3">行业新闻</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">信息：</label>
				<div class="layui-input-block">
					<input type="text" name="xinxi" placeholder="请输入"
						autocomplete="off" class="layui-input" id="xx">
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn" id="img2">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img src="" id="imgUrl" />
				</div>
			</div>
<div class="layui-form-item">
		<label class="layui-form-label">时间</label>
			<div class="layui-input-block">
				<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1" name="fabushijian" placeholder="请输入开始时间" >
</div>
				
			</div>
		</div>
		<div class="layui-form-item">
		<label class="layui-form-label">时间</label>
			<div class="layui-input-block">
				<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test2" name="jieshushijian" placeholder="请输入结束时间" >
</div>
			</div>
		</div>
		
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="tijiao">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">返回</button>
				</div>
			</div>
			<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>

	</div>
</body>
</html>